﻿@using WebApp.Extensions

@model dynamic

@Html.Scripts(
    @<script type="text/javascript">
        require(['Shared/_ShowWithAudit', 'Util'], function (api, util) {
            var model = util.toJS(@HtmlExtensions.ToJson(Html, Model));
            $(function () { api.exec(model); });
        });
        $('#contactPicker').click(function () {
            $.publish('showPicker', ['Contacts', '/contact']);
        });
    </script>
    )

<section id="ShowAuditDiv">
    <div class="row">
        <div class="h3">
            Contacts<div class="pull-right">
                <button type='button' id="contactPicker" class='btn btn-primary'>
                    <i class='icon icon-plus'></i>
                </button>
            </div>
        </div>
        <div data-bind="visible : contacts().length>0" style="background: white; display: none;">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div style="overflow: auto">
                    <table class="table table-bordered table-hover table-condensed">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Mobile</th>
                                <th>Email</th>
                                <th>Company Name</th>
                                <th>Designation</th>
                                <th>Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- ko foreach: contacts -->
                            <tr>
                                <td><a href="#" data-bind="text: name, attr:{'href':'/contact/show?Id=' + contactId()}"></a></td>
                                <td><span data-bind="text: mobile"></span>
                                <td><span data-bind="text: email"></span>
                                <td><span data-bind="text: companyName"></span>
                                <td><span data-bind="text: designation"></span>
                                <td><button class="btn btn-primary" data-bind="click:$root.deleteContactRecord"><i class="icon icon-trash-o"></i></button></td>
                            </tr>
                            <!-- /ko -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div data-bind="visible: contacts().length == 0" class="row" style="margin-left:0">
            <span>No Records found.</span>
        </div>
    </div>
    <div class="row">
        <div class="h3">
            Notes
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div style="overflow: auto">
                <table class="table table-bordered table-hover table-condensed">
                    <thead>
                        <tr>
                            <th class="col-md-2">Noted On</th>
                            <th class="col-md-2">Noted By</th>
                            <th class="col-md-7">Desciption</th>
                            <th class="col-md-1">Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- ko foreach: notes -->
                        <tr>
                            <td class="col-md-2"><div data-bind="text: notedOn"></div></td>
                            <td class="col-md-2"><div data-bind="text: notedBy"></div></td>
                            <td class="col-md-7"><div contenteditable="true" data-bind="editableText: description"></div></td>
                            <td class="col-md-1"><button class="btn btn-primary " data-bind="click:$root.deleteNoteRecord"><i class="icon icon-trash-o"></i></button></td>
                        </tr>
                        <!-- /ko -->
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3"><input type="text" class="form-control " data-bind="value : newNote" placeholder="New Note" required /></td>
                            <td><button class="btn btn-primary icon icon-plus" data-bind="click:addNote"></button></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    <div class="row fileDragHolder">
        <div class="h3">
            Attachments<div class="pull-right">@Html.AttachmentPicker("AC")</div>
        </div>
        <div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div style="overflow: auto">
                    <table class="table table-bordered table-hover table-condensed" data-bind="visible: uploads().length > 0 || attachments().length > 0">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Size (MB)</th>
                                <th>Upload Time</th>
                                <th>Tags</th>
                                <th>Description</th>
                                <th>Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- ko foreach: attachments -->
                            <tr>
                                <td><a href="#" data-bind="text: name,attr:{'href':'/attachment/index?id=' + id()}"></a></td>
                                <td><span data-bind="text: fileType"></span></td>
                                <td><span data-bind="text: fileSize"></span></td>
                                <td><span data-bind="text: operationTime"></span></td>
                                <td><div contenteditable="true" data-bind="editableText: tags"></div></td>
                                <td><div contenteditable="true" data-bind="editableText: description"></div></td>
                                <td><button class="btn btn-primary" data-bind="click:$root.deleteAttachmentRecord"><i class="icon icon-trash-o"></i></button></td>
                            </tr>
                            <!-- /ko -->
                        </tbody>
                        <tfoot data-bind="visible: uploads().length > 0">
                            <tr>
                                <th colspan="6">Files upload status</th>
                            </tr>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Size (MB)</th>
                                <th colspan="2">Status</th>
                                <th></th>
                            </tr>
                            <!-- ko foreach: uploads -->
                            <tr>
                                <td><span data-bind="text: name"></span></td>
                                <td><span data-bind="text: type"></span></td>
                                <td><span data-bind="text: fileSize"></span></td>
                                <td colspan="2">
                                    <div class="progress">
                                        <div class="progress-bar" data-bind="style: { width: percentComplete() + '%' }"></div>
                                    </div>
                                </td>
                                <td style="text-align: center"><button class="btn btn-primary" data-bind="click:cancel"><i class="icon icon-trash-o"></i></button></td>
                            </tr>
                            <!-- /ko -->
                        </tfoot>
                    </table>
                </div>
                <div data-bind="visible: attachments().length == 0" class="row" style="margin-left:0">
                    <span>No Records found.</span>
                </div>
            </div>
        </div>
    </div>
</section>